﻿<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/jcarousel.css"/>
	<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script>
	$(document).ready(function () 
	{
		$('.slideshow-stage').jcarousel();
	});
</script>	
</head>
<body>
<div id="slideshow">
<div class="slideshow-wrapper">
	<div class="slideshow-stage" data-jcarousel="true">
		<ul>
			<li>
				<a href="#"> <img src="images/img_1.jpg" alt="Cougar"/> </a>
				<div class="slideshow-stage-info">Some info</div>
			</li>
			<li>
				<a href="#"> <img src="images/img_2.jpg" alt="Lions"/> </a>
				<div class="slideshow-stage-info">Some info</div>
			</li>					
			<li>
				<a href="#"> <img src="images/img_3.jpg" alt="Snowalker"/> </a>			
				<div class="slideshow-stage-info">Some info</div>
			</li>			
			<li>
				<a href="#"> <img src="images/img_4.jpg" alt="Howling"/> </a>			
				<div class="slideshow-stage-info">Some info</div>
			</li>			
			<li>
				<a href="#"> <img src="images/img_5.jpg" alt="Sunbathing"/> </a>			
				<div class="slideshow-stage-info">Some info</div>
			</li>
		</ul>
		<a href="#" class="prev"><</a>
		<a href="#" class="next">></a>
	</div>
	<div class="slideshow-connect">
		<ul>
			<li >
				<a href="#"> Text 1 </a>			
			</li>
			<li >
				<a href="#"> Text 2 </a>			
			</li>
			<li >
				<a href="#"> Text 3 </a>			
			</li>
			<li >
				<a href="#"> Text 4 </a>			
			</li>
			<li >
				<a href="#"> Text 5 </a>			
			</li>
		</ul>
		<div class="slideshow-connect-full-bar">
		<div class="slideshow-connect-item-bar">
		<div class="slideshow-connect-item-bar">
		<div class="slideshow-connect-item-bar">
		<div class="slideshow-connect-item-bar">
		<div class="slideshow-connect-item-bar">
	</div>

</div>
	
</div>
</body>
</html>